<template>
  <div>
    <h1>正在寻找车辆</h1>
    <video ref="video" autoplay playsinline></video>
  </div>

  <div class="button-container">
    <el-button plain @click="open1"> 扫描车辆信息 </el-button>
  </div>

  <el-descriptions
      v-if="showDescriptions"
      class="margin-top"
      :title="title"
      :column="2"
      :size="size"
      :style="blockMargin"
      border
  >
    <template #extra>
      <el-button type="primary" @click="next()">下一步</el-button>
      <el-button type="share" @click="dialogVisible = true">分享</el-button>
    </template>
    <el-descriptions-item label="车主">{{ getTenantName }}</el-descriptions-item>
    <el-descriptions-item label="车牌号">{{ input.plate }}</el-descriptions-item>
    <el-descriptions-item label="流程状态">{{ getStatus }}</el-descriptions-item>
    <el-descriptions-item label="车款概述">{{ input.result_note }}</el-descriptions-item>
    <el-descriptions-item label="开始时间">{{ input.start_time }}</el-descriptions-item>
    <el-descriptions-item label="结束时间">{{ input.end_time }}</el-descriptions-item>
    <el-descriptions-item label="备注">{{ input.remark }}</el-descriptions-item>
  </el-descriptions>

  <el-dialog  v-model="dialogVisible" title="分享至">
    <div class="share-options">
      <div class="share-option" @click="shareTo('微信')">
        <img src="../wechat.png" alt="分享至微信" />
        <span>微信</span>
      </div>
      <div class="share-option" @click="shareTo('QQ')">
        <img src="../qq.png" alt="分享至QQ" />
        <span>QQ</span>
      </div>
      <div class="share-option" @click="shareTo('抖音')">
        <img src="../dy.png" alt="分享至抖音" />
        <span>抖音</span>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ElNotification } from "element-plus";
import { ref, computed, onMounted, h } from "vue";
import { getOneDetails } from "@/api/work/cari1";
import { getInfo } from "@/api/login";
import { useRouter } from "vue-router";

const router = useRouter();
const id = ref(0);
const token = localStorage.getItem('token'); // 从本地存储获取token

onMounted(async () => {
  try {
    const response = await getInfo(token);
    if (response.code === 200) {
      id.value = response.data.userId; // 获取userId
      function selectOne() {
        getOneDetails(id.value).then((res) => {
          if (res.status == 200) {
            input.value.tenant_id = res.data.data.tenantId;
            input.value.plate = res.data.data.plateId;
            input.value.state = res.data.data.state;
            input.value.status = res.data.data.status;
            input.value.result_note = res.data.data.resultNote;
            input.value.start_time = res.data.data.startTime;
            input.value.end_time = res.data.data.endTime;
            input.value.remark = res.data.data.remark;
          }
        });
      }
      selectOne();
    }
  } catch (error) {
    console.error('获取用户信息失败', error);
  }
});

const showDescriptions = ref(false);
const dialogVisible = ref(false);

const open1 = () => {
  showDescriptions.value = true;
  ElNotification({
    title: '扫描成功',
    message: h('i', { style: 'color: teal' }, '您的车牌号为：' + input.value.plate),
  });
}

const showShareDialog = () => {
  showShareOptions.value = true; // 显示分享弹框
}

const shareTo = (platform) => {
  console.log(`分享至: ${platform}`);
  ElNotification({
    title: '分享成功',
    message: h('i', { style: 'color: teal' }, `成功分享至：${platform}`),
  });
  dialogVisible.value = false;
}

const next = () => {
  router.push('/work/work2');
}

const input = ref({
  tenant_id: '',
  plate: '',
  state: '',
  status: '',
  result_note: '',
  start_time: '',
  end_time: '',
  remark: '',
});

const getTenantName = computed(() => {
  switch (input.value.tenant_id) {
    case 1:
      return "甜甜";
    case 2:
      return "蛤蛤";
    case 3:
      return "蛤蛤";
    default:
      return input.value.tenant_id; // 默认返回 tenant_id 自身
  }
});

const getStatus = computed(() => {
  switch (input.value.tenant_id) {
    case 1:
      return "检查中";
    case 2:
      return "待维修";
    case 3:
      return "检查完成";
    default:
      return input.value.tenant_id; // 默认返回 tenant_id 自身
  }
});
</script>

<style scoped>
video {
  width: 100%;
  height: auto;
  border: 1px solid black;
}

.share-options {
  display: flex;
  justify-content: space-around; /* 横向分布 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 20px;
}

.share-option {
  display: flex;
  flex-direction: column; /* 垂直排列图标和文本 */
  align-items: center; /* 水平居中对齐 */
  cursor: pointer; /* 鼠标悬停时变为指针 */
}

.share-option img {
  width: 50px; /* 根据需要设置图标的宽度 */
  height: 50px; /* 根据需要设置图标的高度 */
}

.share-option span {
  margin-top: 5px; /* 文本与图标之间的间距 */
}
</style>
